<template>
  <div class="min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900 flex items-center justify-center p-4">
    <div class="max-w-6xl w-full">
      <!-- 标题部分 -->
      <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-white mb-4">
          {{ ts('选择您的身份') }}
        </h1>
        <p class="text-xl text-blue-200 mb-8">
          {{ ts('我们为不同类型的用户提供个性化的政策咨询服务') }}
        </p>
        
        <!-- 全球政策数据库统计 -->
        <div class="glass-card p-6 mb-8">
          <h2 class="text-xl font-bold text-white mb-4 text-center flex items-center justify-center">
            <Database class="w-6 h-6 mr-3 text-purple-500" />
            {{ ts('全球政策数据库') }}
          </h2>
          
          <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div class="text-center">
              <div class="text-3xl font-bold text-purple-500 mb-2">156,847</div>
              <div class="text-white text-sm">{{ ts('政策总数') }}</div>
              <div class="text-white/60 text-xs mt-1">{{ ts('实时更新') }}</div>
            </div>
            <div class="text-center">
              <div class="text-3xl font-bold text-blue-500 mb-2">195</div>
              <div class="text-white text-sm">{{ ts('覆盖国家') }}</div>
              <div class="text-white/60 text-xs mt-1">{{ ts('全球覆盖') }}</div>
            </div>
            <div class="text-center">
              <div class="text-3xl font-bold text-green-500 mb-2">2,847</div>
              <div class="text-white text-sm">{{ ts('覆盖行业') }}</div>
              <div class="text-white/60 text-xs mt-1">{{ ts('全行业覆盖') }}</div>
            </div>
            <div class="text-center">
              <div class="text-3xl font-bold text-yellow-500 mb-2">98%</div>
              <div class="text-white text-sm">{{ ts('AI准确率') }}</div>
              <div class="text-white/60 text-xs mt-1">{{ ts('智能预测') }}</div>
            </div>
          </div>
        </div>

        <!-- 平台核心功能 -->
        <div class="glass-card p-6 mb-8">
          <h2 class="text-xl font-bold text-white mb-4 text-center">
            {{ ts('平台核心功能') }}
          </h2>
          
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="text-center">
              <div class="w-16 h-16 bg-gradient-to-r from-electric-500 to-blue-500 rounded-full flex items-center justify-center text-2xl mx-auto mb-4">
                🎯
              </div>
              <h3 class="text-white font-semibold mb-2">{{ ts('政策推演分析') }}</h3>
              <p class="text-white/70 text-sm">{{ ts('AI驱动的政策影响预测和效果评估') }}</p>
            </div>
            
            <div class="text-center">
              <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-emerald-500 rounded-full flex items-center justify-center text-2xl mx-auto mb-4">
                🤖
              </div>
              <h3 class="text-white font-semibold mb-2">{{ ts('智能Agent代理') }}</h3>
              <p class="text-white/70 text-sm">{{ ts('24/7智能政策监控和个性化推荐') }}</p>
            </div>
            
            <div class="text-center">
              <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center text-2xl mx-auto mb-4">
                📊
              </div>
              <h3 class="text-white font-semibold mb-2">{{ ts('定制化报告') }}</h3>
              <p class="text-white/70 text-sm">{{ ts('专业的政策分析报告和决策建议') }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 用户类型选择 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <!-- 巴西投资经理 -->
        <div 
          @click="selectUserType(USER_TYPES.BRAZIL_MANAGER)"
          class="scenario-card group cursor-pointer transform transition-all duration-300 hover:scale-105 hover:shadow-2xl"
        >
          <div class="glass-card p-8 h-full">
            <div class="flex items-center mb-6">
              <div class="w-16 h-16 bg-gradient-to-r from-red-500 to-red-600 rounded-full flex items-center justify-center text-3xl mb-4">
                🇧🇷
              </div>
              <div class="ml-4">
                <h3 class="text-2xl font-bold text-white group-hover:text-electric-500 transition-colors">
                  {{ ts('国际投资经理') }}
                </h3>
                <p class="text-blue-200 text-sm">{{ ts('巴西投资开公司') }}</p>
              </div>
            </div>
            
            <div class="space-y-4">
              <div class="bg-white/10 rounded-lg p-4">
                <h4 class="text-white font-semibold mb-2">{{ ts('角色背景') }}</h4>
                <p class="text-white/80 text-sm">
                  {{ ts('李明，中巴投资有限公司巴西区域总经理，拥有15年国际投资经验，计划在巴西圣保罗建立汽车零部件制造基地') }}
                </p>
              </div>
              
              <div class="bg-white/10 rounded-lg p-4">
                <h4 class="text-white font-semibold mb-2">{{ ts('专属功能') }}</h4>
                <div class="flex flex-wrap gap-2">
                  <span class="px-3 py-1 bg-electric-500/20 text-electric-300 rounded-full text-xs">
                    {{ ts('巴西各州税收对比') }}
                  </span>
                  <span class="px-3 py-1 bg-electric-500/20 text-electric-300 rounded-full text-xs">
                    {{ ts('营商环境评估') }}
                  </span>
                  <span class="px-3 py-1 bg-electric-500/20 text-electric-300 rounded-full text-xs">
                    {{ ts('投资激励政策') }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 牛津博士 -->
        <div 
          @click="selectUserType(USER_TYPES.OXFORD_PHD)"
          class="scenario-card group cursor-pointer transform transition-all duration-300 hover:scale-105 hover:shadow-2xl"
        >
          <div class="glass-card p-8 h-full">
            <div class="flex items-center mb-6">
              <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-purple-600 rounded-full flex items-center justify-center text-3xl mb-4">
                🎓
              </div>
              <div class="ml-4">
                <h3 class="text-2xl font-bold text-white group-hover:text-electric-500 transition-colors">
                  {{ ts('海归博士') }}
                </h3>
                <p class="text-blue-200 text-sm">{{ ts('博士后回国发展') }}</p>
              </div>
            </div>
            
            <div class="space-y-4">
              <div class="bg-white/10 rounded-lg p-4">
                <h4 class="text-white font-semibold mb-2">{{ ts('角色背景') }}</h4>
                <p class="text-white/80 text-sm">
                  {{ ts('张博士，牛津大学大气监测专业博士，专注于空气质量监测技术研究，希望回国继续从事环境科学研究') }}
                </p>
              </div>
              
              <div class="bg-white/10 rounded-lg p-4">
                <h4 class="text-white font-semibold mb-2">{{ ts('专属功能') }}</h4>
                <div class="flex flex-wrap gap-2">
                  <span class="px-3 py-1 bg-electric-500/20 text-electric-300 rounded-full text-xs">
                    {{ ts('各城市人才政策') }}
                  </span>
                  <span class="px-3 py-1 bg-electric-500/20 text-electric-300 rounded-full text-xs">
                    {{ ts('科研资助查找') }}
                  </span>
                  <span class="px-3 py-1 bg-electric-500/20 text-electric-300 rounded-full text-xs">
                    {{ ts('城市生活对比') }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 跨境电商产业园 -->
        <div 
          @click="selectUserType(USER_TYPES.ECOMMERCE_PARK)"
          class="scenario-card group cursor-pointer transform transition-all duration-300 hover:scale-105 hover:shadow-2xl"
        >
          <div class="glass-card p-8 h-full">
            <div class="flex items-center mb-6">
              <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-green-600 rounded-full flex items-center justify-center text-3xl mb-4">
                🏢
              </div>
              <div class="ml-4">
                <h3 class="text-2xl font-bold text-white group-hover:text-electric-500 transition-colors">
                  {{ ts('跨境电商产业园') }}
                </h3>
                <p class="text-blue-200 text-sm">{{ ts('产业园区运营') }}</p>
              </div>
            </div>
            
            <div class="space-y-4">
              <div class="bg-white/10 rounded-lg p-4">
                <h4 class="text-white font-semibold mb-2">{{ ts('角色背景') }}</h4>
                <p class="text-white/80 text-sm">
                  {{ ts('王园长，深圳跨境电商产业园管理委员会主任，管理着华南地区最大的跨境电商产业园，服务500多家电商企业') }}
                </p>
              </div>
              
              <div class="bg-white/10 rounded-lg p-4">
                <h4 class="text-white font-semibold mb-2">{{ ts('专属功能') }}</h4>
                <div class="flex flex-wrap gap-2">
                  <span class="px-3 py-1 bg-electric-500/20 text-electric-300 rounded-full text-xs">
                    {{ ts('产业园优惠政策') }}
                  </span>
                  <span class="px-3 py-1 bg-electric-500/20 text-electric-300 rounded-full text-xs">
                    {{ ts('海关政策跟踪') }}
                  </span>
                  <span class="px-3 py-1 bg-electric-500/20 text-electric-300 rounded-full text-xs">
                    {{ ts('园区绩效分析') }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 巴西铜矿企业 -->
        <div 
          @click="selectUserType(USER_TYPES.MINING_COMPANY)"
          class="scenario-card group cursor-pointer transform transition-all duration-300 hover:scale-105 hover:shadow-2xl"
        >
          <div class="glass-card p-8 h-full">
            <div class="flex items-center mb-6">
              <div class="w-16 h-16 bg-gradient-to-r from-orange-500 to-orange-600 rounded-full flex items-center justify-center text-3xl mb-4">
                ⛏️
              </div>
              <div class="ml-4">
                <h3 class="text-2xl font-bold text-white group-hover:text-electric-500 transition-colors">
                  {{ ts('矿业出口企业') }}
                </h3>
                <p class="text-blue-200 text-sm">{{ ts('海外矿业投资') }}</p>
              </div>
            </div>
            
            <div class="space-y-4">
              <div class="bg-white/10 rounded-lg p-4">
                <h4 class="text-white font-semibold mb-2">{{ ts('角色背景') }}</h4>
                <p class="text-white/80 text-sm">
                  {{ ts('陈总，中巴矿业集团海外事业部总经理，在巴西经营铜矿开采业务，年产铜矿石100万吨，是中巴贸易的重要参与者') }}
                </p>
              </div>
              
              <div class="bg-white/10 rounded-lg p-4">
                <h4 class="text-white font-semibold mb-2">{{ ts('专属功能') }}</h4>
                <div class="flex flex-wrap gap-2">
                  <span class="px-3 py-1 bg-electric-500/20 text-electric-300 rounded-full text-xs">
                    {{ ts('矿业法规监管') }}
                  </span>
                  <span class="px-3 py-1 bg-electric-500/20 text-electric-300 rounded-full text-xs">
                    {{ ts('出口程序优化') }}
                  </span>
                  <span class="px-3 py-1 bg-electric-500/20 text-electric-300 rounded-full text-xs">
                    {{ ts('环保合规监测') }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 政策推演示例 -->
      <div class="mt-16 glass-card p-8">
        <h2 class="text-2xl font-bold text-white mb-6 text-center">
          {{ ts('政策推演示例') }}
        </h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="bg-white/5 rounded-lg p-6">
            <h3 class="text-lg font-semibold text-electric-500 mb-3">
              {{ ts('新能源汽车退税政策影响分析') }}
            </h3>
            <p class="text-white/80 text-sm mb-4">
              {{ ts('通过AI模型分析新能源汽车退税政策对不同企业的影响，预测政策效果，为投资决策提供数据支持') }}
            </p>
            <div class="flex items-center text-electric-300 text-sm">
              <TrendingUp class="w-4 h-4 mr-2" />
              {{ ts('预计影响企业数量: 3,200家') }}
            </div>
          </div>
          
          <div class="bg-white/5 rounded-lg p-6">
            <h3 class="text-lg font-semibold text-electric-500 mb-3">
              {{ ts('国家补贴政策效果评估') }}
            </h3>
            <p class="text-white/80 text-sm mb-4">
              {{ ts('基于历史数据和AI算法，预测各类国家补贴政策的实际效果，帮助企业选择最优的补贴申请策略') }}
            </p>
            <div class="flex items-center text-electric-300 text-sm">
              <BarChart3 class="w-4 h-4 mr-2" />
              {{ ts('政策成功率预测: 85%') }}
            </div>
          </div>
        </div>
      </div>

      <!-- 底部信息 -->
      <div class="mt-8 text-center">
        <p class="text-white/60 text-sm">
          {{ ts('基于人工智能技术的政策咨询平台，为您提供精准的政策信息和专业的决策支持') }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useTranslation } from '../composables/useTranslation.js'
import { USER_TYPES, userService } from '../services/userService.js'
import { TrendingUp, BarChart3, Database } from 'lucide-vue-next'

export default {
  name: 'ScenarioLogin',
  components: {
    TrendingUp,
    BarChart3,
    Database
  },
  
  setup() {
    const { ts } = useTranslation()
    const router = useRouter()
    
    const selectUserType = async (userType) => {
      try {
        // 使用场景登录
        await userService.quickScenarioLogin(userType)
        
        // 跳转到对应的Dashboard
        router.push('/dashboard')
      } catch (error) {
        console.error('登录失败:', error)
      }
    }
    
    return {
      ts,
      USER_TYPES,
      selectUserType
    }
  }
}
</script>

<style scoped>
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

.scenario-card {
  border-radius: 20px;
  overflow: hidden;
}

.scenario-card:hover .glass-card {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(96, 165, 250, 0.5);
}

.text-electric-500 {
  color: #60a5fa;
}

.text-electric-300 {
  color: #93c5fd;
}

.bg-electric-500\/20 {
  background-color: rgba(96, 165, 250, 0.2);
}
</style> 